<template>
  <div>
    <el-button type="text" @click="getData(id)" size="small" :disabled="btnControl">配置</el-button>
    <el-dialog
      title="按钮配置"
      :visible.sync="dialogVisible"
      :modal="true"
    >
      <el-tabs  v-model="activeName" >
        <el-tab-pane label="立即购买"  name="beforeOrder">
          <el-form :label-position="'left'" :model="beforeOrder" :rules="beforeOrderRules" ref="beforeOrder" label-width="135px">

            <el-form-item label="投资金额(低于):" prop="advisingAmount" required>
              <el-col :span="8">
                <el-input v-model.number="beforeOrder.advisingAmount"  placeholder="输入金额"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="弹框样式:" prop="msgTheme">
              <el-col :span="8">
                <el-select v-model="beforeOrder.msgTheme" placeholder="请选择" >
                  <el-option
                    v-for="item in beforeDialogTypeList"
                    :value="item.value"
                    :key="item.value"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-col>
            </el-form-item>

            <el-form-item label="按钮样式:" required>
              <el-col :span="8">
                <el-radio class="radio" v-model="beforeOrder.buttonNum" label=1 value="1">单按钮</el-radio>
                <el-radio class="radio" v-model="beforeOrder.buttonNum" label=2 value="2">双按钮</el-radio>
              </el-col>
            </el-form-item>

            <el-form-item label="活动规则:" >
              <el-col :span="22">
                <el-input v-model="beforeOrder.actRuleUrl" placeholder="URL链接"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="左按钮(关闭):" prop="buttonLeft" v-show="beforeOrder.buttonNum==2" required>
              <el-col :span="8">
                <el-input v-model="beforeOrder.buttonLeft" placeholder="不超过5个字的按钮名称"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="按钮:" prop="buttonCenter"  v-show="beforeOrder.buttonNum==1" required>
              <el-col :span="8">
                <el-input v-model="beforeOrder.buttonCenter" placeholder="不超过5个字的按钮名称"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="右按钮(跳转):" v-show="beforeOrder.buttonNum==2" prop="buttonRight" required>
              <el-col :span="8">
                <el-input v-model="beforeOrder.buttonRight" placeholder="不超过5个字的按钮名称"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="提示文案：" prop="popMsg">
              <el-col :span="22">
                <el-input type="textarea" v-model="beforeOrder.popMsg" resize="none" placeholder="最多300个字符"></el-input>
              </el-col>
            </el-form-item>
          </el-form>

        </el-tab-pane>

        <!--支付完成开始-->
        <el-tab-pane label="支付完成" name="afterOrder">
          <el-form :model="afterOrder" :label-position="'left'"  :rules="afterRules" ref="afterOrder" label-width="135px">

            <el-form-item label="弹框样式:" prop="msgTheme">
              <el-col :span="8">
                <el-select v-model="afterOrder.msgTheme" placeholder="请选择" >
                  <el-option
                    v-for="item in afterDialogTypeList"
                    :value="item.value"
                    :key="item.value"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-col>
            </el-form-item>

            <el-form-item label="按钮样式:" required>
              <el-col :span="8">
                <el-radio class="radio" v-model="afterOrder.buttonNum" label=1 value="1">单按钮</el-radio>
                <el-radio class="radio" v-model="afterOrder.buttonNum" label=2 value="2">双按钮</el-radio>
              </el-col>
            </el-form-item>

            <el-form-item label="活动规则:" >
              <el-col :span="22">
                <el-input v-model="afterOrder.actRuleUrl" placeholder="URL链接"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="左按钮(跳转):" v-show="afterOrder.buttonNum==2" required>
              <el-col :span="6" >
                <el-form-item prop="buttonLeftType">
                  <el-select v-model="afterOrder.buttonLeftType" placeholder="请选择">
                    <el-option
                      v-for="item in buttonTypeList"
                      :value="item.name"
                      :key="item.name"
                      :label="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item prop="buttonLeft">
                  <el-input v-model="afterOrder.buttonLeft" placeholder="不超5字按钮名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-input v-model="afterOrder.buttonLeftUrl" placeholder="URL" v-show="afterOrder.buttonLeftType=='URL'"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="按钮(跳转):" v-show="afterOrder.buttonNum==1"  required>
              <el-col :span="6" >
                <el-form-item prop="buttonCenterType">
                  <el-select v-model="afterOrder.buttonCenterType" placeholder="请选择">
                    <el-option
                      v-for="item in buttonTypeList"
                      :value="item.name"
                      :key="item.name"
                      :label="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item prop="buttonCenter">
                  <el-input v-model="afterOrder.buttonCenter" placeholder="不超5字按钮名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-input v-model="afterOrder.buttonCenterUrl" placeholder="URL" v-show="afterOrder.buttonCenterType=='URL'"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="右按钮(跳转)：" v-show="afterOrder.buttonNum==2" required>
              <el-col :span="6" >
                <el-form-item prop="buttonRightType">
                  <el-select v-model="afterOrder.buttonRightType" placeholder="请选择">
                    <el-option
                      v-for="item in buttonTypeList"
                      :value="item.name"
                      :key="item.name"
                      :label="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item prop="buttonRight">
                  <el-input v-model="afterOrder.buttonRight" placeholder="不超5字按钮名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-input v-model="afterOrder.buttonRightUrl" placeholder="URL" v-show="afterOrder.buttonRightType=='URL'"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="提示文案：" prop="descMsg">
              <el-col :span="18">
                <el-input type="textarea" v-model="afterOrder.descMsg" resize="none" placeholder="最多300个字符"></el-input>
              </el-col>
            </el-form-item>

          </el-form>

        </el-tab-pane>
        <!--支付完成结束-->
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"   @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>



<script type="text/javascript">
  function validateButton(value, callback) {
    if (value == '') {
      callback(new Error('请输入按钮名称'))
    } else if (value.length > 5) {
      callback(new Error('只能输入5个字以内'))
    } else {
      callback()
    }
  }
  export default{
    data(){
      /*验证立即购买的左按钮*/
      var validateBeforeButton =(rue,value,callback) =>{
          /*选择一个按钮的时候不用验证*/
          if(this.beforeOrder.buttonNum==1)
            callback()

        return validateButton(value, callback);
      }

      /*验证立即购买的中间按钮类型*/
      var validateBeforeButtonLeftType =(rue,value,callback) =>{
        /*选择两个按钮的时候不用验证*/
        if(this.beforeOrder.buttonNum==2)
          callback()

        if(value==''){
            callback(new Error('请选择按钮类型'))
        }else{
            callback()
        }
      }

      /*验证立即购买中间按钮*/
      var validateBeforeButtonCenter =(rue,value,callback)=>{
        if(this.beforeOrder.buttonNum==2)
          callback()

        return validateButton(value, callback);
      }

      /*验证立即购买右按钮类型*/
      var validateBeforeButtonRightType = (rue,value,callback) =>{
        if(this.beforeOrder.buttonNum==1)
          callback()

        if(value==''){
          callback(new Error('请选择按钮类型'))
        }else{
          callback()
        }
      }

      /*验证立即购买右按钮名称*/
      var validateBeforeButtonRight = (rue,value,callback) =>{
          if(this.beforeOrder.buttonNum==1)
            callback()

          return validateButton(value, callback);
      }

      /*验证支付完成左按钮类型*/
      var validateAfterButtoType=(rue,value,callback) =>{
        if(this.afterOrder.buttonNum==1)
          callback()

        if(value==''){
          callback(new Error('请选择按钮类型'))
        }else{
          callback()
        }
      }

      /*验证支付完成的左按钮*/
      var validateAfterButton =(rue,value,callback) =>{
        /*选择一个按钮的时候不用验证*/
        if(this.afterOrder.buttonNum==1)
          callback()

        return validateButton(value, callback);
      }

      /*验证支付完成的中间按钮类型*/
      var validateAfterButtonLeftType =(rue,value,callback) =>{
        /*选择两个按钮的时候不用验证*/
        if(this.afterOrder.buttonNum==2)
          callback()

        if(value==''){
          callback(new Error('请选择按钮类型'))
        }else{
          callback()
        }
      }

      /*验证支付完成中间按钮*/
      var validateAfterButtonCenter =(rue,value,callback)=>{
        if(this.afterOrder.buttonNum==2)
          callback()

        return validateButton(value, callback);
      }

      /*验证支付完成右按钮类型*/
      var validateAfterButtonRightType = (rue,value,callback) =>{
        if(this.afterOrder.buttonNum==1)
          callback()

        if(value==''){
          callback(new Error('请选择按钮类型'))
        }else{
          callback()
        }
      }

      /*验证支付完成右按钮名称*/
      var validateAfterButtonRight = (rue,value,callback) =>{
        if(this.afterOrder.buttonNum==1)
          callback()

        return validateButton(value, callback);
      }

      return {
        activeName:'beforeOrder', //选用的面板页
        dialogVisible:false, //是否显示对话框
        beforeDialogTypeList:[],   //立即购买弹框样式列表（主题1之类）
        afterDialogTypeList:[], //支付完成弹框样式列表（主题123之类的）
        buttonTypeList:[],  //按钮类型列表
        actId:'', //活动Id
        beforeOrder:{
          advisingAmount:'', //投资金额
          buttonNum:'2', //按钮个数
          actRuleUrl:'', // 活动规则URL
          buttonLeft:'', //左按钮名称
          msgTheme:'', // 主题样式（弹框样式里选了什么）
          buttonRight:'',  //右按钮名称
          buttonRightUrl:'', //右按钮跳转URL
          buttonRightType:'', //右按钮类型
          buttonCenter:'', //中间按钮名称
          buttonCenterUrl:'',
          buttonCenterType:'',
          popMsg:'' //提示方案
        },
        afterOrder:{
          buttonNum:'2',
          actRuleUrl:'',
          buttonLeft:'',
          buttonLeftType:'',
          buttonLeftUrl:'',
          buttonRightType:'',
          buttonRight:'',
          buttonRightUrl:'',
          buttonCenter:'',
          buttonCenterUrl:'',
          buttonCenterType:'',
          buttonCenter:'',
          buttonCenterUrl:'',
          buttonCenterType:'',
          msgTheme:'',
          descMsg:''
        },
        formData:{
          actRuleUrl: "",
          activityId: 0,
          advisingAmount: 0,
          buttonCenter: "",
          buttonCenterType: "NONE",
          buttonCenterUrl: null,
          buttonLeft: "",
          buttonLeftType: "NONE",
          buttonLeftUrl: null,
          buttonNum: 0,
          buttonRight: "",
          buttonRightType: "NONE",
          buttonRightUrl: null,
          checkMsg: "",
          descMsg: "",
          msgTheme: "",
          msgType: "",
          needPopMsg: true,
          popMsg: ""
        },
        beforeOrderRules:{
          advisingAmount:[
            {type:'number',message:'请输入投资金额',trigger:'blur'}
          ],
          msgTheme:[
            { required: true, message: '请选择弹框样式', trigger: 'blur,change' }
          ],
          actRuleUrl:[
            {required: true, message: '请输入活动规则URL', trigger: 'blur'}
          ],
          buttonLeft:[
            {validator:validateBeforeButton,trigger:'blur'}
          ],
          buttonCenterType:[
            {validator:validateBeforeButtonLeftType,trigger:'blur,change'}
          ],
          buttonCenter:[
            {validator:validateBeforeButtonCenter,trigger:'blur'}
          ],
          buttonRightType:[
            {validator:validateBeforeButtonRightType,trigger:'blur,change'}
          ],
          buttonRight:[
            {validator:validateBeforeButtonRight,trigger:'blur'}
          ],
          popMsg:[
            {required: true, message: '请输入提示方案', trigger: 'blur'}
          ]
        },
        afterRules:{
          msgTheme:[
            { required: true, message: '请选择弹框样式', trigger: 'blur,change' }
          ],
          actRuleUrl:[
            {required: true, message: '请输入活动规则URL', trigger: 'blur'}
          ],
          buttonLeftType:[
            {validator:validateAfterButtoType,trigger:'blur,change'}
          ],
          buttonLeft:[
            {validator:validateAfterButton,trigger:'blur'}
          ],
          buttonCenterType:[
            {validator:validateAfterButtonLeftType,trigger:'blur,change'}
          ],
          buttonCenter:[
            {validator:validateAfterButtonCenter,trigger:'blur'}
          ],
          buttonRightType:[
            {validator:validateAfterButtonRightType,trigger:'blur,change'}
          ],
          buttonRight:[
            {validator:validateAfterButtonRight,trigger:'blur'}
          ],
          descMsg:[
            {required: true, message: '请输入提示方案', trigger: 'blur'}
          ]
        }


      }
    },
    created(){
      this.$emit('')
    },
    props:['id','btnControl'],
    methods:{
      getData:function(id){
        this.actId = id
        /*获取立即购买弹框样式型*/
        this.$http.get('/api-active/v1/api/OptionDetails/activity/msgTheme?msgType=BEFORE_ORDER').then((response)=>{
          var data = response.body.result
          this.beforeDialogTypeList = data
        })

        /*获取支付完成弹框样式型*/
        this.$http.get('/api-active/v1/api/OptionDetails/activity/msgTheme?msgType=AFTER_ORDER').then((response)=>{
          var data = response.body.result
          this.afterDialogTypeList = data
        })

        /*按钮类型*/
        this.$http.get('/api-active/v1/api/OptionDetails/activity/buttonType').then((response)=>{
          var data = response.body.result
          this.buttonTypeList = data
        })

        /*根据活动ID获取配置*/
        this.$http.get('/api-active/v1/api/activityCenter/activity/advisingMsg/'+id).then((response)=>{
          var data = response.body.result
          if(data.length >0){
            for(let i=0;i<data.length;i++){
                  let dataTemp = data[i]
              if(dataTemp.msgType =="BEFORE_ORDER"){
                this.beforeOrder.actRuleUrl = dataTemp.actRuleUrl
                this.beforeOrder.advisingAmount = dataTemp.advisingAmount
                this.beforeOrder.buttonLeft = dataTemp.buttonLeft
                this.beforeOrder.buttonNum = dataTemp.buttonNum+''
                this.beforeOrder.buttonRight =dataTemp.buttonRight
                this.beforeOrder.buttonRightType = dataTemp.buttonRightType
                this.beforeOrder.buttonRightUrl = dataTemp.buttonRightUrl
                this.beforeOrder.buttonCenter =dataTemp.buttonCenter
                this.beforeOrder.buttonCenterType = dataTemp.buttonCenterType
                this.beforeOrder.buttonCenterUrl = dataTemp.buttonCenterUrl
                this.beforeOrder.msgTheme = dataTemp.msgTheme
                this.beforeOrder.popMsg = dataTemp.popMsg
                continue
              }
              if(dataTemp.msgType =="AFTER_ORDER"){
                this.afterOrder.actRuleUrl = dataTemp.actRuleUrl
                this.afterOrder.buttonLeft = dataTemp.buttonLeft
                this.afterOrder.buttonLeftType = dataTemp.buttonLeftType
                this.afterOrder.buttonLeftUrl = dataTemp.buttonLeftUrl
                this.afterOrder.buttonNum = dataTemp.buttonNum+''
                this.afterOrder.buttonRight =dataTemp.buttonRight
                this.afterOrder.buttonRightType = dataTemp.buttonRightType
                this.afterOrder.buttonRightUrl = dataTemp.buttonRightUrl
                this.afterOrder.buttonCenter =dataTemp.buttonCenter
                this.afterOrder.buttonCenterType = dataTemp.buttonCenterType
                this.afterOrder.buttonCenterUrl = dataTemp.buttonCenterUrl
                this.afterOrder.msgTheme = dataTemp.msgTheme
                this.afterOrder.descMsg = dataTemp.descMsg
              }
            }
          }

          this.dialogVisible =true
        })
      },
      submitForm(){
          var flag =true
          /*立即购买*/
          if(this.activeName =='beforeOrder'){
            this.$refs['beforeOrder'].validate((valid)=>{
                if(!valid){
                    alert("立即购买表单未填写完成，提交失败！")
                    flag = false
                }
            })

            if(!flag)
              return


            /*立即购买*/
            this.formData = {}
            this.formData.actRuleUrl = this.beforeOrder.actRuleUrl
            this.formData.activityId = this.actId
            this.formData.advisingAmount = this.beforeOrder.advisingAmount
            this.formData.buttonNum= this.beforeOrder.buttonNum
            this.formData.msgTheme = this.beforeOrder.msgTheme
            this.formData.msgType="BEFORE_ORDER"
            this.formData.popMsg = this.beforeOrder.popMsg
            this.formData.buttonLeftUrl = null
            this.formData.buttonLeftType = "NONE"
            this.formData.buttonCenterType = "NONE"
            this.formData.buttonCenterUrl=null
            this.formData.buttonRightUrl = null
            this.formData.buttonRightType = "NONE"
            this.formData.descMsg =""
            this.formData.checkMsg =""
            if(this.beforeOrder.buttonNum == 1){ //单按钮
              this.formData.buttonCenter = this.beforeOrder.buttonCenter
              this.formData.buttonLeft =""
              this.formData.buttonRight = ""
            }else{
              this.formData.buttonCenter = ""
              this.formData.buttonLeft = this.beforeOrder.buttonLeft
              this.formData.buttonRight = this.beforeOrder.buttonRight
            }
            this.$http.put('/api-active/v1/api/activityCenter/activity/advisingMsg',this.formData).then((response)=>{
              var data = response.body
              if (data.resultCode === '200') {
                this.dialogVisible = false
              }else{
                alert(data.result)
                return
              }
            })

            this.dialogVisible=false

          }else{ //支付完成
            this.$refs['afterOrder'].validate((valid)=>{
              if(!valid){
                alert("支付完成表单未填写完成，提交失败！")
                flag = false
              }
            })

            if(!flag)
              return

            this.formData = {}
            this.formData.actRuleUrl = this.afterOrder.actRuleUrl
            this.formData.activityId = this.actId
            this.formData.advisingAmount = this.afterOrder.advisingAmount
            this.formData.buttonNum= this.afterOrder.buttonNum
            this.formData.msgTheme = this.afterOrder.msgTheme
            this.formData.msgType="AFTER_ORDER"
            this.formData.popMsg = ""
            this.formData.descMsg = this.afterOrder.descMsg
            this.formData.checkMsg =""
            if(this.afterOrder.buttonNum ==1){
              this.formData.buttonCenter = this.afterOrder.buttonCenter
              this.formData.buttonCenterType = this.afterOrder.buttonCenterType
              this.formData.buttonCenterUrl=(this.afterOrder.buttonCenterType=="URL") ? this.afterOrder.buttonCenterUrl : null
              this.formData.buttonLeft =""
              this.formData.buttonLeftUrl = null
              this.formData.buttonLeftType = "NONE"
              this.formData.buttonRight = ""
              this.formData.buttonRightUrl = null
              this.formData.buttonRightType = "NONE"
            }else{
              this.formData.buttonCenter = ""
              this.formData.buttonCenterUrl = null
              this.formData.buttonCenterType = "NONE"
              this.formData.buttonLeft = this.afterOrder.buttonLeft
              this.formData.buttonLeftType = this.afterOrder.buttonLeftType
              this.formData.buttonLeftUrl = (this.afterOrder.buttonLeftType =="URL")?this.afterOrder.buttonLeftUrl:null
              this.formData.buttonRight = this.afterOrder.buttonRight
              this.formData.buttonRightType = this.afterOrder.buttonRightType
              this.formData.buttonRightUrl = (this.afterOrder.buttonRightType =="URL")?this.afterOrder.buttonRightUrl:null
            }

            this.$http.put('/api-active/v1/api/activityCenter/activity/advisingMsg',this.formData).then((response)=>{
              var data = response.body
              if (data.resultCode === '200') {
                this.dialogVisible = false
              }else{
                alert(data.result)
                return
              }
            })

            this.dialogVisible=false
          }
      }
    }
  }
</script >

<style lang="stylus" scoped="scoped" rel="stylesheet/stylus">
  .el-row{
    margin-top :20px;
  }
  .el-col{
    text-align :left;
  }

</style>
